<template>
	<view>
		<u-navbar :is-back="false" title="云课堂"></u-navbar>
		<view class="">
			<tui-search @searchEmit="searchEmitHandler"></tui-search>
		</view>
		<view class="menu">
			<view class="" v-if="false">
				<view class="search u-flex u-row-between">
					<view class="u-flex">
						<u-icon name="search" size="42" color="#999"></u-icon>
						<u-input :disabled="true" class="u-m-l-15" style="color: #BFBFBF;" placeholder="搜索您想要的课程" v-model="search" />
					</view>
					<view class="search-btn">
						<text>搜索</text>
					</view>
				</view>
			</view>
			<view class="u-p-t-15">
				<u-swiper height="240" border-radius="16" :list="swiper"></u-swiper>
			</view>
			<view class="u-m-t-20">
				<u-grid :col="5" :border="false">
					<u-grid-item v-for="(item,index) in menu" :key="index" @click="menuClick(item,index)">
						<!-- <u-icon :name="item.image" :size="100"></u-icon> -->
						<image :src="item.image" class="menu-img" mode=""></image>
						<view class="grid-text u-m-t-20 u-font-24">{{item.title}}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="u-p-30">
			<externailTitle title="专题名称"></externailTitle>
			<view class="u-p-t-30">
				<view class="u-flex u-row-between card-box" v-for="(item,index) in classTypeList" :idx="index">
					<view><image class="card-box-img" :src="item.imgUrl" style="width: 210rpx;height: 130rpx;" mode="aspectFill"></image></view>
					<view class="" style="width: 412rpx;">
						<view class="">
							<view class="card-box-title">{{item.classifyName}}</view>
							<view class="card-box-account u-line-1 u-m-t-8">{{item.briefIntroduction}}</view>
						</view>
						<view class="u-m-t-20">
							<view class="card-box-footer u-flex u-row-between">
								<view >共 {{item.lessonNumber}} 门</view>
								<view> <u-icon name="eye-fill" size="24" :label="item.broadcastNumber" label-size="24" label-color="#8C8C8C" /></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹窗广告 -->
		<uni-popup ref="popup" type="center" :show="popupShow" @change="unipopupFun">
			<view class="" style="width: 650rpx;height: 80vh;background: #FFFFFF;"></view>
		</uni-popup>
		<tabs/>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import tuiSearch from '../../components/tui-search/tui-search.vue';
	import externailTitle from '../../components/externailTitle/externailTitle.vue';
	import tabs from '../../components/tabs/tabs.vue'
	export default {
		data() {
			return {
				search:'',
				yunUrl:'https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/',
				menu: [
					{
						image: '../../static/class/menu/live.png',
						title: '直播中心'
					},
					{
						image: '../../static/class/menu/steward.png',
						title: '管家上岗'
					},
					// {
					// 	image: '../../static/class/menu/steward.png',
					// 	title: '专题课'
					// },
					// {
					// 	image: '../../static/class/menu/steward.png',
					// 	title: '在线考试'
					// },
				],
				swiper: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				popupShow: false,
				classTypeList:[]
			}
		},
		onLoad() {
			//uni.setStorageSync('token','eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJsaWNlbnNlIjoic28tZmFzdCIsInVzZXJfbmFtZSI6ImFkbWluMSIsInNjb3BlIjpbInJlYWQiLCJ3cml0ZSJdLCJleHAiOjE2Mjk2Mzc0MjAsInVzZXJOYW1lIjoiYWRtaW4xIiwidXNlcklkIjoxMzgxODQ2NTUyMTM2NDQ1OTU5LCJhdXRob3JpdGllcyI6WyJhZG1pbiJdLCJqdGkiOiIxYmRkOWQ3OC0wNWY0LTQzZDAtOWNlNi03YzhiOGQyOTMzZDciLCJjbGllbnRfaWQiOiJ3ZWIifQ.8QCAl5nZfUoZAg6DRaj95S0ql9cSPQlSsmTkY3CxIqI')
			this.getCarouselCrList()
			this.getIndexClassifyInfoList()
			this.getHomeMenu()
			setTimeout(function() {
				this.popupShow = true
			}, 2e3)
		},
		methods: {
			getHomeMenu(){
				this.$util.request('app/classroom/v1/getMenuSettingist','get',{},true).then(res=>{
					console.log(res)
					const menu= [
					{
						image: '../../static/class/menu/live.png',
						title: '直播中心'
					},
					{
						image: '../../static/class/menu/steward.png',
						title: '管家上岗'
					},
				]
					const arr = res.data.map(item=>{
						item.image=  '../../static/class/menu/steward.png',
						item.title = item.menuName
						return item
					})
					if(arr.length== 1){
						arr.push(
						{
							image: '../../static/class/menu/steward.png',
							title: '在线考试'
						}
						)
					}
					this.menu = menu.concat(arr)
					let obj = {
						image: '../../static/class/menu/all.png',
						title: '全部应用'
					}
					this.menu.push(obj)
				})
			},
			getCarouselCrList(){
				console.log(111111)
				
				this.$http.getCarouselCrList().then(res => {
					console.log(res)
					this.swiper = res.data.map(item =>{
						item.image = this.yunUrl+ item.imgUrl
						return item
					})
				}).catch(() => {
					console.log(22222)
				});
			},
			menuClick(item,data){
				if(data == 2){
					uni.navigateTo({
						url:'../curriculum/curriculum'
					})
				}else if(data==3){
					uni.navigateTo({
						url:'../exam/exam'
					})
				}
			},
			searchEmitHandler(data){
				uni.navigateTo({
					url:'../search/search?search='+data
				})
			},
			getIndexClassifyInfoList(){
				this.$http.getIndexClassifyInfoList().then(res =>{
					console.log(res)
					this.classTypeList = res.data.map(item=>{
						item.imgUrl = this.yunUrl +item.picture
						return item;
					})
				})
			},
			unipopupFun(e) {
				config.log('unipopupFun', e)
				if (!e.show) {
					
				}
			},
		},
		components:{
			'externailTitle': externailTitle,
			uniPopup,
			tuiSearch,
			tabs
		}
	}
</script>

<style lang="scss">
	$default-font-color: #262626;
	.menu-img{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
	.card-box{
		padding: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
	}
	.card-box-img{
		width: 210rpx;
		height: 130rpx;
	}
	.card-box-title{
		font-size: 28rpx;
		font-weight: bold;
		color: $default-font-color;
	}
	.card-box-account{
		font-size: 22rpx;
		color: #BFBFBF;
	}
	.card-box-footer{
		font-size: 24rpx;
		color: #8C8C8C;
	}
	.tit{
		font-size: 32rpx;
		font-weight: bold;
		color: $default-font-color;
	}
	.menu {
		padding: 0 30rpx 10rpx 30rpx;
		background-color: #FFFFFF;
	}

	.search {
		// width: 690rpx;
		// height: 78rpx;
		padding: 7rpx 8rpx 7rpx 32rpx;
		border: 2rpx solid #F53939;
		border-radius: 39rpx;
	}

	.search-btn {
		width: 137rpx;
		height: 64rpx;
		background: #F53939;
		border-radius: 32rpx;
		text-align: center;
		line-height: 64rpx;
		color: #FFFFFF;
	}
</style>
